<template>
    <div>
      <div class="header block">
        <div class="row">
          <div class="search">
            <text>生效时间：   </text>
            <el-date-picker
                v-model="selectTime"
                type="date"
                placeholder="选择时间"
            />
            <text>方案类型：</text>
            <el-select v-model="comboCode" class="screen-i search-type">
              <el-option v-for="(item,index) in plansList" :label="item.label" :value="item.value" :key="index"/>
            </el-select>
            <input
                type="text"
                placeholder="请输入姓名/身份证/被派遣单位名称"
                class="input search-input"
                v-model="searchText"
                @keydown.enter="search"
            />
            <button class="btn" @click="search">搜索</button>
            <button class="btn-white" @click="onReset">重置</button>
          </div>
          <div class="flex.align">
<!--            <button class="derivation" @click="getDerivationRoster()">-->
<!--              导出名单-->
<!--            </button>-->
            <export-button @export="getDerivationRoster()">导出名单</export-button>
          </div>
        </div>
      </div>
      <div class="container block block-alone">
        <el-tabs model-value="detail">
          <div class="header height-right">
            <div class=""></div>
          </div>
          <div class="table">
            <el-table
              :data="tableData"
              style="width: 100%"
              ref="dataTable"
              :header-row-style="{ color: '#202536' }"
              :row-style="{ color: '#5E617D' }"
              @selection-change="handleSelectionChangeOne"
              :row-key="rowKeyInit"
              type="selection"
            >
              <el-table-column type="selection" width="55" reserve-selection />
              <el-table-column type="index" label="序号" width="100px" reserve-selection/>
              <el-table-column prop="userName" reserve-selection label="姓名" width="130px"/>
              <el-table-column class="card-no" reserve-selection prop="idCardNo" label="身份证号"/>
              <el-table-column label="方案类型" reserve-selection prop="comboName" width="140px"/>
              <el-table-column prop="serveCompanyName" label="被派遣单位" />
              <el-table-column prop="insurStartTime" label="生效时间" />
            </el-table>
            <el-pagination
              class="pagination"
              v-model:currentPage="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[10, 30, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="getQueryInsureRecord"
            >
            </el-pagination>
          </div>
        </el-tabs>
      </div>
    </div>
    <!--  @close="this.isFactory = false"-->
    <changeFactory v-if="isFactory" :isFactory="isFactory" @close2="close2"
                   :renewalManufactory="renewalManufactory"/>
  </template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BillDetailDto, BillDto } from '@/api/bill'
import { dateFormat, downLoadFile } from '@/utils/util'
// import { PeopleListDto } from '@/api/long-insure'
import { updateEnsureWorker } from '@/api/export'
import {
    getDerivationRoster,
    disposableTransposingArr
} from '@/api/long-insure'
import { queryInsureRecord, queryPlans } from '@/api/insure-deduction'
import changeFactory from '@/components/chang-factory.vue'
import store from '@/store/index'
import axios from 'axios'
export default defineComponent({
    name: 'InsureWorker',
    components: {
        changeFactory
    },
    data () {
        return {
            isBatchPay: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as BillDetailDto[],
            searchText: '',
            searchValue: '',
            detailInfo: {} as BillDto,
            selects: [] as string[],
            isDeletePopup: false,
            idCardNo: '',
            personnelInfo: [] as BillDetailDto[],
            renewalManufactory: [] as disposableTransposingArr[],
            conmpanyPlanId: 0,
            isFactory: false,
            selectTime: dateFormat('YYYY-mm-dd', new Date()), // 筛选选择的时间
            plansList: [],
            comboCode: ''
        }
    },
    created () {
        this.getQueryInsureRecord()
        this.getQueryPlans()
    },
    mounted () {
        // 获取完数据调用
        this.$nextTick(() => {
            // this.$refs.dataTable.toggleAllSelection()
        })
        this.$Bus.on('close2', (e) => {
            console.log(e, 'eeee')
            if (e) {
                this.isFactory = false
            }
        })
    },
    methods: {
        async getDerivationRoster () {
            const result = await updateEnsureWorker({
                searchText: this.searchText,
                queryDate: dateFormat('YYYY-mm-dd', new Date(this.selectTime)),
                comboCode: this.comboCode,
				productType: 0 // 0是日日保 1是团意保
            }, {
                loading: true
            })
            console.log(result, 'result')
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
        },
        handleSizeChange () {
            this.pageNum = 1
			this.getQueryInsureRecord()
        },
        rowKeyInit (row: any) {
            return row.id
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getQueryInsureRecord()
        },
        onReset () {
            this.searchText = ''
            this.comboCode = ''
            this.search()
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        handleSelectionChangeOne (selects: any[]) {
            console.log(selects, 'selectsselectsselects')
            this.selects = selects.map(item => item.id)
            console.log(this.selects, 'this.selectsthis.selectsthis.selects')
            // this.conmpanyPlanId =
            this.renewalManufactory = selects.map(item => {
                return {
                    id: item.id, // 要换厂的人员列表id
                    idCardNo: item.idCardNo, // 人员身份证
                    occupationId: item.occupationId, // 工种id（客户要换厂的工种id）
                    occupationName: item.occupationName, // 工种名（客户要换厂的工种名）
                    serveCompanyId: item.serveCompanyId, // 被派遣单位id（要换厂的id）
                    serveCompanyName: item.serveCompanyName, // 被派遣单位名称（要换厂的名称）
                    userName: item.userName, // 用户名
                    companyPlanId: item.companyPlanId
                }
            })
            console.log(this.renewalManufactory, 'renewalManufactory')
        },
        // 获取日日保险在保人员名单
        async getQueryInsureRecord () {
            const result = await queryInsureRecord({
                searchText: this.searchText,
                queryDate: dateFormat('YYYY-mm-dd', new Date(this.selectTime)),
                comboCode: this.comboCode,
				pageSize: this.pageSize,
				pageNum: this.pageNum,
                productType: 0 // 0是日日保 1是团意保
            })
			// console.log(result, 'result')
            this.tableData = result.rows
			this.total = result.total
        },
        // 获取日日保方案列表信息
        async getQueryPlans () {
            const result = await queryPlans({
                productType: 0 // 0是日日保 1是团意保
            })
            this.plansList = result.map((item:any) => {
                return {
                    value: item.wesurePlanCode,
                    label: item.industryPlanName
                }
            })
            // plansList
            console.log(result, 'result')
        }
    }
})
</script>

  <style lang="stylus" scoped>
  table()
  .header.block {
    padding 20px
  }

  .basic
    margin-top 20px

  .row
    display: flex
    justify-content: space-between
    align-items: center

  .value
    margin-right 30px

  .card-no
    font-size: 35 rpx

  .rovalsState em {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    margin-right: 5px;
  }

  .rovalsState em.sub {
    background: #1989FA;
  }

  .rovalsState em.adopt {
    background: #00a854;
  }

  .rovalsState em.stay {
    background: #FF7E68;
  }

  .wait-sub
    position: absolute;
    top: 13%;
    left: 43%;
    margin: auto;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    margin-right: 5px;
    background: #1989fa;
    align-items: center;

  .record
    font-weight: bold
    font-size: 20px
    text-align: center
    color #000000

  .record-row
    text-align: center
    margin-top: 50px
    margin-bottom: 20px

  .top
    font-weight: bold
    font-size: 15px

  .idcord
    padding-left: 15px

  .record-row span {
    padding-left: 20px
  }

  .status
    display: flex
    justify-content: space-between
    align-items: center

  .value.important
    color color-red
    font-style italic

  :deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px

  :deep().el-tabs__nav-scroll
    padding-right 20px

  .height-right
    float: right

  .download-btn
    width: 126px !important;

  .btn-red
    background: #FF7E68

  .el-tabs__header
    margin: 0

  .block-alone
    padding: 0 24px 0

  .screen-i
    width 50px
    margin-right 16px
    padding-left: 10px
    padding-right: 15px

  .search-type
    width 170px
    margin-right 8px

  .record-top
    display flex
    align-items center
    justify-content center
    margin 20px 0

    .record-top-i
      margin-left 12px

    .decorate
      width 6px
      height 6px
      border-radius 50%
      margin-right 5px

    // background red

    .rovalsState
      color #5E617D
      display flex
      align-items center

    .top-name
      color #202536
      font-size 16px
      font-weight 600

    .top-idcord
      color #5E617D

  .derivation
    height: 40px;
    background: #1989fa;
    border-radius: 4px;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 100px;

  .derivation-right {
    margin-right 16px;
    background: #FFFFFF;
    color: color-black;
    border: 1px solid border-color;
  }
:deep() .el-date-editor.el-input
    margin-right 20px
  </style>
